<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Basic Example</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/prettify.css" rel="stylesheet">

    <style>
        #rootwizard{
            box-shadow: 1px 5px 18px rgba(5, 1, 8, 0.1 );
            border-radius: 8px;
            background-color: #fff;
            border: 1px solid #555555;
            width: 500px;
            height: 150px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding-top: 20px;
            font-size:25px;
        }
        .box{
            width: 90%;
            margin: auto;
        }

        .pager{
            width: 85%;
            font-size: 18px;
            margin-left: 15px;
        }

        .tab-content{
            width: 90%;
            /*height: 30px;*/
            margin: auto;
        }

        .select{
            width: 105px;
            font-size: 15px;
            margin-left: 20px;
            text-align: center;
        }

    </style>
</head>
<body>
<div id="rootwizard">
    <div class="box">
        <div class="tab-content">
            <div class="tab-pane" id="tab1">
                场景选择
                    <select class="select">
                        <option value="清华大学">清华大学</option>
                    </select>

            </div>
            <div class="tab-pane" id="tab2">
                网格层级
                    <select class="select">
                        <option value="第20层">第20层</option>
                    </select>
            </div>
        </div>
        <div>
            <ul class="tab">
                <li><a href="#tab1" data-toggle="tab" style="background: transparent"></a></li>
                <li><a href="#tab2" data-toggle="tab" style="background: transparent"></a></li>
            </ul>
            <ul class="pager wizard">
                <li class="previous"><a href="#">上一步</a></li>
                <li class="next"><a href="#">下一步</a></li>
            </ul>
        </div>
    </div>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="js/jquery.bootstrap.wizard.js"></script>
<script src="js/prettify.js"></script>
<script>
    $(document).ready(function() {
        $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index+1;
            var $percent = ($current/$total) * 100;
            $('#rootwizard .progress-bar').css({width:$percent+'%'});
        }});

        $('.next').click(function () {
            setTimeout(function () {
                window.location.href='drive.html'
            },2000);
        })
    });
</script>
</body>
</html>